<template>
  <div>
    <el-form ref="ruleForm" label-position="right" size="small" label-width="70px" class="base-search-more" v-if="$store.state.showAgent">
      <el-row>
        <el-col :span="6" >
          <el-form-item label="区域">
            <el-select style="width:100%" v-model="params.agentId" filterable default-first-option placeholder="--区域--" @change="getTableList()">
              <el-option v-for="item in restaurants" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="wrap-item clearfix">
      <!-- 会员红包 -->
      <el-card class="box-card" :body-style="{ padding: '0' }">
        <div slot="header" class="clearfix">
          <span class="head">会员红包</span>
          <el-switch v-if="dataTable.memberRedEnvelope.id" style="float: right;"
            @change="selectEnable($event, dataTable.memberRedEnvelope.id)" v-model="memberRedEnvelope" active-color="#13ce66" />
        </div>
        <div v-if="dataTable.memberRedEnvelope.id">
          <div class="msg-wrap">
            <div class="row"><span class="name">会员设置</span>
              <div class="box rows">
                <span class="box-list">充值 {{dataTable.memberRedEnvelope.rechargeamount || 0}} 元，
                  赠送 {{dataTable.memberRedEnvelope.redamount || 0}} 元通用红包 {{dataTable.memberRedEnvelope.num || 0}} 个</span>
              </div>
            </div>
            <div class="row" v-if="dataTable.memberRedEnvelope.redEnvelopeAttach.length > 0"><span class="name">加量包设置</span>
              <div class="box rows">
                <span class="box-list" v-for="item in dataTable.memberRedEnvelope.redEnvelopeAttach" :key="item.id">
                  支付 {{item.payamount || 0}} 元，赠送 {{item.redamount || 0}} 
                  元通用红包 {{item.rednum || 0}} 个，月限购 {{item.limitnum || 0}} 次</span>
              </div>
            </div>
            <div class="row" v-if="dataTable.memberRedEnvelope.agentids"><span class="name">开启分区域</span>
              <div class="box rows">
                <span class="box-list">{{dataTable.memberRedEnvelope.agentids | filtersName(childrenAgentId)}}</span>
              </div>
            </div>
          </div>
          <div class="footer">
            <el-button type="text" style="color: #409eff" @click="toPath('/main/activity/viplist')">购买用户</el-button>
            <el-button type="text" @click="toPath('/main/activity/vipset', dataTable.memberRedEnvelope.id)">编辑规则</el-button>
          </div>
        </div>
        <div class="add" v-else @click="toPath('/main/activity/vipset')"><i class="el-icon-plus"></i></div>
      </el-card>
      <!-- 积分兑换 -->
      <el-card class="box-card" :body-style="{ padding: '0' }">
        <div slot="header" class="clearfix">
          <span class="head">积分兑换</span>
          <el-switch v-if="dataTable.redeem.id" style="float: right;" 
            @change="selectEnable($event, dataTable.redeem.id)" v-model="redeem" active-color="#13ce66"/>
        </div>
        <div v-if="dataTable.redeem.id">
          <div class="msg-wrap">
            <div class="row"><span class="name">兑换规则</span>
              <div class="box">
                <span class="box-list" v-for="item in dataTable.redeem.redEnvelopeAttach" :key="item.id">
                  {{item.integral || 0}} 积分兑换 {{item.redamount || 0}} 元通用红包,
                  满 {{dataTable.redeem.fulls || 0}} 元可用，有效期 {{dataTable.redeem.redvalidday || 0}} 天
                </span>
              </div>
            </div>
            <div class="row" v-if="dataTable.redeem.agentids"><span class="name">开启分区域</span>
              <div class="box rows">
                <span class="box-list">{{dataTable.redeem.agentids | filtersName(childrenAgentId)}}</span>
              </div>
            </div>
          </div>
          <div class="footer">
            <el-button type="text" style="color: #409eff" @click="toPath('/main/activity/intellist')">兑换记录</el-button>
            <el-button type="text" @click="toPath('/main/activity/intel', dataTable.redeem.id)">编辑规则</el-button>
          </div>
        </div>
        <div class="add" v-else @click="toPath('/main/activity/intel')"><i class="el-icon-plus"></i></div>
      </el-card>
      <!-- 下单分享红包 -->
      <el-card class="box-card" :body-style="{ padding: '0' }">
        <div slot="header" class="clearfix"><span class="head">下单分享多人红包</span>
          <el-switch v-if="dataTable.orderToShareRedEnvelope.id" style="float: right;"
            @change="selectEnable($event, dataTable.orderToShareRedEnvelope.id)" v-model="orderToShareRedEnvelope" active-color="#13ce66" />
        </div>
        <div v-if="dataTable.orderToShareRedEnvelope.id">
          <div class="msg-wrap">
            <div class="row"><span class="name">分享规则</span>
              <div class="box">
                <span class="box-list">
                  {{dataTable.orderToShareRedEnvelope.redamount ? dataTable.orderToShareRedEnvelope.redamount.indexOf(',') > -1 ? 
                      dataTable.orderToShareRedEnvelope.redamount.split(',')[0] +'-' + dataTable.orderToShareRedEnvelope.redamount.split(',')[1]
                        : dataTable.orderToShareRedEnvelope.redamount : 0}} 元红包共 {{dataTable.orderToShareRedEnvelope.num || 0}} 个，第 
                  {{dataTable.orderToShareRedEnvelope.maxrednum}} 个人特定 
                  {{dataTable.orderToShareRedEnvelope.maxredamount}} 元
                </span>
                <span class="box-list">消费满 {{dataTable.orderToShareRedEnvelope.fulls || 0}} 元可用，有效期 {{dataTable.orderToShareRedEnvelope.redvalidday}} 天</span>
              </div>
            </div>
            <div class="row" v-if="dataTable.orderToShareRedEnvelope.agentids"><span class="name">开启分区域</span>
              <div class="box rows">
                <span class="box-list">{{dataTable.orderToShareRedEnvelope.agentids | filtersName(childrenAgentId)}}</span>
              </div>
            </div>
          </div>
          <div class="footer">
            <el-button type="text" style="color: #409eff" @click="toPath('/main/activity/sharenotes')">分享记录</el-button>
            <el-button type="text" @click="toPath('/main/activity/share', dataTable.orderToShareRedEnvelope.id)">编辑规则</el-button>
          </div>
        </div>
        <div class="add" v-else @click="toPath('/main/activity/share')"><i class="el-icon-plus"></i></div>
      </el-card>
      <!-- 邀请有奖 -->
      <el-card class="box-card" :body-style="{ padding: '0' }">
        <div slot="header" class="clearfix"><span class="head">邀请有奖</span>
          <el-switch v-if="dataTable.invitationToHavePrize.id" style="float: right;"
            @change="selectEnable($event, dataTable.invitationToHavePrize.id)" v-model="invitationToHavePrize" active-color="#13ce66"/>
        </div>
        <div v-if="dataTable.invitationToHavePrize.id">
          <div class="msg-wrap">
            <div class="row"><span class="name">邀请设置</span>
              <div class="box rows">
                <span class="box-list">
                  邀请新用户下单，赠 {{dataTable.invitationToHavePrize.redamount || 0}} 元通用红包
                  消费满 {{dataTable.invitationToHavePrize.fulls || 0}} 元可用，有效期 {{dataTable.invitationToHavePrize.redvalidday}} 天
                </span>
                <span class="box-list">
                  被邀请注册成功后 {{dataTable.invitationToHavePrize.amount1 || 0}} 元通用红包
                  消费满 {{dataTable.invitationToHavePrize.fulls || 0}} 元可用，有效期 {{dataTable.invitationToHavePrize.redvalidday}} 天
                </span>
              </div>
            </div>
            <div class="row" v-if="dataTable.invitationToHavePrize.agentids"><span class="name">开启分区域</span>
              <div class="box rows">
                <span class="box-list">{{dataTable.invitationToHavePrize.agentids | filtersName(childrenAgentId)}}</span>
              </div>
            </div>
          </div>
          <div class="footer">
            <el-button type="text" style="color: #409eff" @click="toPath('/main/activity/invitednotes')">注册记录</el-button>
            <el-button type="text" @click="toPath('/main/activity/invited', dataTable.invitationToHavePrize.id)">编辑规则</el-button>
          </div>
        </div>
        <div class="add" v-else @click="toPath('/main/activity/invited')"><i class="el-icon-plus"></i></div>
      </el-card>
    </div>
    <pt-table-loading v-show="isLoading" />
  </div>
</template>
<script>
import { redEnvelopeSelect, redEnvelopeEnable } from '@/api/activity'
import { agentSubList } from '@/api/com'
import acction from '@/utils/acction'
export default {
  data() {
    return { // 表单配置
      config: [{ key: 'agentId', type: 'agentId', label: '区域' }],
      params: { agentId: null }, // 区域
      dataTable: {
        memberRedEnvelope: {},
        invitationToHavePrize: {},
        orderToShareRedEnvelope: {},
        redeem: {}
      },
      memberRedEnvelope: true, // 会员
      invitationToHavePrize: false, // 邀请有奖
      orderToShareRedEnvelope: false, // 下单分享红包
      redeem: false, // 积分兑换
      isLoading: false,
      childrenAgentId: []
    }
  },
  computed: {
    restaurants() { // 区域据
      return this.$store.state.agentListArea
    }
  },
  filters: {
    filtersName(agentids, child) { // 获取代理商名称
      if (agentids && child.length > 0) {
        return agentids.split(',').map(i => {
          const index = child.findIndex(j => j.id === parseInt(i))
          if (index > -1) return child[index].name
          else return ''
        }).join('、')
      }
    }
  },
  watch: {
    restaurants: {
      handler(val) {
        if (val && val.length) {
          this.params.agentId = val[0].id
          this.getTableList()
        }
      },
      deep: true
    }
  },
  methods: {
    toPath(path, id) { // 跳转页面
      const query = { agentid: this.params.agentId }
      if (id) query.id = id
      this.$router.push({
        path: path, query
      })
    },
    getAgentSubList(agentId) { // 获取子区域
      agentSubList({ agentId: this.params.agentId }).then(res => {
        if (res.success) {
          this.childrenAgentId = res.data.children || []
        }
      })
    },
    getTableList() { // 获取订单数据
      this.isLoading = true
      const params = { ...this.params }
      this.getAgentSubList()
      redEnvelopeSelect(params).then(res => {
        if (res.success) {
          this.dataTable = res.data
          this.memberRedEnvelope = res.data.memberRedEnvelope.enable === 1
          this.invitationToHavePrize = res.data.invitationToHavePrize.enable === 1
          this.orderToShareRedEnvelope = res.data.orderToShareRedEnvelope.enable === 1
          this.redeem = res.data.redeem.enable === 1
        }
      }).finally(() => { this.isLoading = false })
    },
    selectEnable(enable, id) {
      this.$confirm('是否确认改变当前活动状态？').then(res => {
        this.isLoading = true
        redEnvelopeEnable({id, enable: enable ? 1: 0}).then(res => {
         
        }).finally(() => {
          this.getTableList()
          this.isLoading = true
        })
      }).catch(() => {
        this.getTableList()
      })
    }
  },
  mounted() {
    if (this.restaurants.length) {
      this.params.agentId = this.restaurants[0].id
      this.getTableList()
    }
  }
}
</script>
<style lang="scss" scoped>
  .wrap-item{
    max-width: 1200px;
    margin: 0 auto;
    column-count: 2;
    column-gap: 10;
    .box-card{
      break-inside: avoid;
      margin-bottom: 10px;
      .head{
        font-size: 16px;
        font-weight: bold;
      }
      .msg-wrap{
        padding: 10px 20px;
        .row{
          display: flex;
          .name{
            height: 30px;
            line-height: 30px;
            width: 100px;
            color: #999;
          }
          .box{
            flex: 1;
            display: flex;
            flex-flow: column;
            &.rows{
              flex-flow: row wrap;
              justify-content: space-between;
            }
            .box-list{
              margin-right: 10px;
              height: 30px;
              line-height: 30px;
            }
          }
        }
      }
      .footer{
        padding: 10px 20px;
        display: flex;
        justify-content: flex-end;
        border-top: 1px solid #EBEEF5;
      }
      .add{
        padding: 40px 20px;
        text-align: center;
        i{
          font-size: 40px;
          color: #999;
        }
        
      }
    }
  }
</style>
